<template>
    <el-row :gutter="40">
        <el-col v-if="!form.id">
            <el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
        </el-col>
        <template v-else>
            <el-col :lg="9">
                <h2>{{ form.name || '新增菜单' }}</h2>
                <el-form :model="form" ref="dialogForm" label-width="80px" label-position="left">
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="form.meta.type">
                            <el-radio-button label="dir">目录</el-radio-button>
                            <el-radio-button label="menu">菜单</el-radio-button>
                            <el-radio-button label="btn">按钮</el-radio-button>
                            <el-radio-button label="api">接口</el-radio-button>
                        </el-radio-group>
                        <el-radio-group v-model="form.meta.type" style="margin-top: 10px">
                            <el-radio-button label="iframe">Iframe</el-radio-button>
                            <el-radio-button label="link">外链</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="name">
                        <el-input
                            v-model="form.name"
                            clearable
                            placeholder="菜单显示名字"
                        ></el-input>
                        <div class="el-form-item-msg">
                            系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏
                        </div>
                    </el-form-item>
                    <el-form-item label="上级菜单" prop="pid">
                        <el-cascader
                            v-model="form.pid"
                            :options="state.menuOptions"
                            :props="state.menuProps"
                            :show-all-levels="false"
                            placeholder="顶级菜单"
                            clearable
                            disabled
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item
                        label="菜单图标"
                        prop="meta.icon"
                        v-if="['menu', 'dir', 'iframe', 'link'].includes(form.meta.type)"
                    >
                        <kitegoIconSelect v-model="form.meta.icon" clearable></kitegoIconSelect>
                    </el-form-item>
                    <el-form-item
                        label="前端路由"
                        prop="path"
                        v-if="['dir', 'menu', 'iframe', 'link'].includes(form.meta.type)"
                    >
                        <el-input v-model="form.path" clearable placeholder="必填"></el-input>
                        <div class="el-form-item-msg">
                            例如：1、/setting/menu；外链或者iframe填写网址如:http://kitego.cn；2、amis页面会根据此路由请求api获取页面结构
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="页面类型"
                        prop="viewType"
                        v-if="['menu'].includes(form.meta.type)"
                    >
                        <el-radio-group v-model="form.meta.viewType">
                            <el-radio-button label="1">自定义页面</el-radio-button>
                            <el-radio-button label="2">amis</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        label="前端页面"
                        prop="component"
                        v-if="['menu'].includes(form.meta.type)"
                    >
                        <el-input v-model="form.component" clearable placeholder="非必填">
                            <template #prepend>views/</template>
                        </el-input>
                        <div class="el-form-item-msg">
                            如amis、父节点、链接或Iframe等菜单不需要填写
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="是否隐藏"
                        prop="meta.hidden"
                        v-if="['dir', 'menu', 'link', 'iframe'].includes(form.meta.type)"
                    >
                        <el-checkbox v-model="form.meta.hiddenFlag" true-label="1" false-label="0"
                            >隐藏菜单</el-checkbox
                        >
                        <el-checkbox
                            v-model="form.meta.hiddenBreadcrumb"
                            true-label="1"
                            false-label="0"
                            >隐藏面包屑
                        </el-checkbox>
                        <div class="el-form-item-msg">
                            菜单不显示在导航中，但用户依然可以访问，例如详情页
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="重定向"
                        prop="redirect"
                        v-if="!['dir'].includes(form.meta.type)"
                    >
                        <el-input v-model="form.redirect" clearable placeholder="非必填"></el-input>
                        <div class="el-form-item-msg">例如：/setting/menu</div>
                    </el-form-item>
                    <el-form-item
                        label="颜色"
                        prop="color"
                        v-if="['menu'].includes(form.meta.type)"
                    >
                        <el-color-picker
                            v-model="form.meta.color"
                            :predefine="state.predefineColors"
                        ></el-color-picker>
                    </el-form-item>
                    <el-form-item
                        label="菜单标签"
                        prop="tag"
                        v-if="['dir', 'menu'].includes(form.meta.type)"
                    >
                        <el-input v-model="form.meta.tag" clearable placeholder="非必填"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="菜单高亮"
                        prop="active"
                        v-if="['dir', 'menu'].includes(form.meta.type)"
                    >
                        <el-input v-model="form.active" clearable placeholder="非必填"></el-input>
                        <div class="el-form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
                    </el-form-item>
                    <el-form-item
                        label="整页路由"
                        prop="fullpage"
                        v-if="['menu'].includes(form.meta.type)"
                    >
                        <el-switch
                            active-value="1"
                            inactive-value="0"
                            v-model="form.meta.fullpage"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save" v-auths-all="['settingMenuEdit']"
                            >保 存
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :lg="15" class="authList">
                <template v-if="['btn', 'api'].includes(form.meta.type)">
                    <h2>接口权限</h2>
                    <kitegoFormTable
                        :data="form.authList"
                        :columns="columns"
                        :hideAdd="true"
                        :hideDelete="true"
                        :dataTemplate="state.authListAddTemplate"
                        emptyText="暂无匹配接口权限"
                    >
                        <template #isVerify="scope">
                            <el-switch
                                v-model="scope.row.isVerify"
                                active-value="1"
                                inactive-value="0"
                            />
                        </template>
                        <template #method="scope">
                            <el-select v-model="scope.row.method" placeholder="请求">
                                <el-option
                                    v-for="item in state.methodOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </template>
                        <template #auth="scope">
                            <el-input
                                v-model="scope.row.auth"
                                placeholder="请输入路由权限"
                            ></el-input>
                        </template>
                        <template #uniqueAuth="scope">
                            <el-input
                                v-model="scope.row.uniqueAuth"
                                placeholder="请输入权限唯一标识"
                            ></el-input>
                        </template>
                    </kitegoFormTable>
                </template>
            </el-col>
        </template>
    </el-row>
</template>

<script lang="ts" setup>
import { tool } from '@/utils/tool.ts'
import setting from '@/api/modules/setting.ts'

const props = defineProps({
    menu: {
        type: Object,
        default: () => {}
    }
})

// 表单表格配置项
const columns = reactive([
    { prop: 'isVerify', label: '是否校验', width: 110 },
    { prop: 'method', label: '请求方式', width: 110 },
    { prop: 'auth', label: '系统路由', width: 180 },
    { prop: 'uniqueAuth', label: '唯一标识' }
])

const form = reactive({
    id: '',
    pid: '',
    name: '未命名',
    path: '',
    component: '',
    redirect: '',
    meta: {
        name: '',
        icon: '',
        active: '',
        color: '',
        type: 'menu',
        fullpage: 0,
        tag: '',
        hiddenFlag: 0,
        hiddenBreadcrumb: 0,
        viewType: '1'
    },
    authList: [],
    active: 0
})

const state = reactive({
    menuOptions: [] as any,
    menuProps: {
        value: 'id',
        label: 'name',
        checkStrictly: true
    },
    predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#67C23A', '#00ced1', '#409EFF', '#c71585'],
    rules: [],
    authListAddTemplate: {
        auth: '',
        uniqueAuth: ''
    },
    methodOptions: [
        {
            value: 'GET',
            label: 'GET'
        },
        {
            value: 'POST',
            label: 'POST'
        }
    ]
})

watch(
    () => props.menu,
    (val) => {
        console.log(val, 'val')
        state.menuOptions = treeToMap(props.menu)
    },
    { deep: true }
)

watch(
    () => form.meta.viewType,
    (val) => {
        if (val == '2') {
            form.component = 'maintenance/devTools/render/index'
        }
    }
)

watch(
    () => form.name,
    (val) => {
        form.meta.name = val
    }
)

watch(
    () => form.authList,
    (val) => {
        console.log(val, 'val')
        form.authList.forEach((item: any) => {
            if (item.uniqueAuth == '') {
                item.uniqueAuth = tool.toCamelCase(item.auth)
            }
        })
    },
    { deep: true }
)

defineExpose({
    setData
})

// 简单化菜单
function treeToMap(tree: any) {
    const map: Array<{ id: number; pid: number; name: string }> = []
    tree.forEach((item: any) => {
        const obj = {
            id: item.id,
            pid: item.pid,
            name: item.name,
            children: item.children && item.children.length > 0 ? treeToMap(item.children) : null
        }
        map.push(obj)
    })

    return map
}

// 保存
async function save() {
    await setting.menu.edit.post(form)
}

// 表单注入数据
function setData(data: any, pid: any) {
    Object.assign(form, data)

    form.authList = data.authList || []
    form.pid = pid
}
</script>

<style scoped>
h2 {
    font-size: 17px;
    color: #3c4a54;
    padding: 0 0 30px 0;
}

.authList {
    border-left: 1px solid #eee;
}

[data-theme='dark'] h2 {
    color: #fff;
}

[data-theme='dark'] .authList {
    border-color: #434343;
}
</style>
